<template>
	<view class="page">
		<view class="back-icon" :style="'margin-top:' + menuButtonHeight+ ';height:' + height">
			<u-icon name="arrow-left" size="28" @click="back"></u-icon>
			<text v-if="flag">商品详情</text>
			<text v-else>Goods Detail</text>
		</view>
		<scroll-view class="good-con" scroll-y="true" :style="'height:' + scrollHeight">
			<view class="pic" :style="'background-image: url(' + goodDetail.carousel_image_list[0].image_url+ ')'">
				<view class="gradation"></view>
			</view>
			<view class="con">
				 <view class="introduce">
					 <text>{{flag? goodDetail.name: goodDetail.name_en}}</text>
					 <text>-</text>
					 <text>￥ {{goodDetail.sku[0].specification_list[0].price}}</text>
					 <view v-if="flag">
						 <text>-</text>
						 <text style="font-size: 12px;">{{goodDetail.describe}}</text>
					 </view>
					 <text>-</text>
					 <view class="taste">
						 <text v-if="flag">口味</text>
						 <text v-else>Flavor</text>
						 <text style="font-size: 12px; margin-top: 5px;">{{flag? goodDetail.sku[0].flavor_name: goodDetail.sku[0].flavor_name_en}}</text>
					 </view>
					 <text>-</text>
					 <view class="dimension">
						 <text v-if="flag">尺寸</text>
						 <text v-else>Size</text>
						 <view class="dim-item" v-for="item in goodDetail.sku[0].specification_list" :key="item">
							 <text style="font-size: 12px; margin-top: 5px;">{{flag? item.specification_name: item.specification_name_en}}</text>
							 <text style="font-size: 12px;">{{flag? item.proposal: item.proposal_en}}</text>
							 <text style="font-size: 12px;">/</text>
						 </view>
					 </view>
					 <text>-</text>
					 <view class="save">
						 <text v-if="flag">保存方式</text>
						 <text v-else>Storage</text>
						 <text style="font-size: 12px; margin-top: 5px;">{{flag? goodDetail.storage_mode: goodDetail.storage_mode}}</text>
					 </view>
					 <text>-</text>
					 <view class="ingredients" v-if="flag">
						 <text>主要原料</text>
						 <text class="ingre-txt">{{goodDetail.batching}}</text>
					 </view>
				 </view>
			</view>
			<image class="intro-image" :src="item.image_url" v-for="item in goodDetail.introduce_image_list" :key="item"></image>
		</scroll-view>
		<view class="footer">
			 <u-icon name="server-fill" size="28" @click="service"></u-icon>
			 <view>
				 <u-icon name="bag-fill" size="30" style="margin-left: 10px;" @click="shop"></u-icon>
				 <view v-if="shopNum" class="num">{{shopNum}}</view>
			 </view>
			 <button v-if="flag" class="shopping" size="mini" :plain="true" @click="add">加入购物车</button>
			 <button v-else class="shopping" size="mini" :plain="true" @click="add">Add To Bag</button>
			 <button v-if="flag" class="buy" size="mini" :plain="true" @click="goShop">点击购买</button>
			 <button v-else class="buy" size="mini" :plain="true" @click="goShop">Purchase</button>
		</view>
	
		<my-service :show="show" @newShow="newShow"></my-service>
	</view>
</template>

<script>
	import store from '@/store/pop.js';
	import goodApi from '../../apis/goodApi.js'
	import style from "@/store/style.js"
	export default {
		data() {
			return {
				menuButtonHeight: '',
				scrollHeight: '',
				height: '',
				goodMap: {
				  goods_id: 18,
				  shop_id: 4,
				  language: "cn",
				  platform: "pc",
				  token: "0",
				  ver: "0.5.0"
				},
				goodDetail:{},
				show: false,
				flag: style.state.flag,
				shopNum: 0
			}
		},
		methods: {
			getMenuButtonHeight(){
				let _that = this;
				const res = wx.getMenuButtonBoundingClientRect();
				let bottom = res.bottom;
				const height = wx.getSystemInfo({
					success(res1){
						_that.scrollHeight = res1.windowHeight - bottom - 70 + 'px'
					}
				})
				this.menuButtonHeight = res.top + 'px';
				this.height = res.height + 'px';
			},
			back(){
				uni.navigateBack({
					delta: 1
				})
			},
			async getGoodInfo(){
				this.goodMap.shop_id = style.state.cityId;
				if(style.state.flag){
					this.goodMap.language = 'cn'
				}else{
					this.goodMap.language = 'en'
				}
				this.goodMap.goods_id = store.state.goodsId
				const {data:res} = await goodApi.getGoodDetail(this.goodMap)
				console.log(res.data)
				this.goodDetail = res.data
			},
			service(){
				this.show = true
			},
			newShow(data){
				this.show = data
			},
			shop(){
				uni.redirectTo({
					url:"/pages/order/order"
				})
			},
			async add(){
				let map = {
					"goods_id": this.goodDetail.goods_id,
					"goods": this.goodDetail
				}
				const cart = uniCloud.importObject("cart")
				const res = await cart.addCart(map)
				if(res.id !== ''){
					this.shopNum++;
					uni.showToast({
						title: "添加成功",
						icon: "none"
					})
				}
			},
			goShop(){
				let name = this.goodDetail.name
				let imageUrl = this.goodDetail.carousel_image_list[0].image_url
				let price = this.goodDetail.sku[0].specification_list[0].price
				let flavor = this.goodDetail.sku[0].flavor_name
				let specification_name = this.goodDetail.sku[0].specification_list[0].specification_name
				let proposal = this.goodDetail.sku[0].specification_list[0].proposal
				uni.navigateTo({
					url:'/cart/cart-info/cart-info?goodsId=' + this.goodMap.goods_id
				})
			}
		},
		onLoad(){
			this.getMenuButtonHeight();
		},
		onShow(){
			this.getGoodInfo()
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		height: 400px;
	}
	.back-icon{
		display: flex;
		align-items: center;
		text{
			margin-left: 10px;
		}
	}
	.good-con{
		margin-top: 10px;
		height: 200px;
		
		.pic{
			width: 100%;
			height: 380px;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center center;
			display: flex;
			align-items: flex-end;
			.gradation{
				width: 100%;
				height: 150px;
				background-color: white;
				background: linear-gradient(to bottom, rgba(255,255,255,0), #ffffff);
			}
		}
	}
	.con{
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20px;
		.introduce{
			display: flex;
			align-items: center;
			flex-direction: column;
			.taste{
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			.dimension{
				display: flex;
				flex-direction: column;
				align-items: center;
				.dim-item{
					display: flex;
					flex-direction: column;
					align-items: center;
				}
			}
			.save{
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			.ingredients{
				display: flex;
				flex-direction: column;
				align-items: center;
				.ingre-txt{
					font-size: 12px; 
					margin-top: 5px; 
					padding: 10px; 
					text-align: center;
				}
				
			}
		}
	}
	.intro-image{
		width: 100%;
		height: 1800px;
		object-fit: contain;
		
	}
	.footer{
		width: 100%;
		height: 17%;
		display: flex;
		justify-content: center;
		align-items: center;
		justify-content: space-around;
		margin-left: 5px;
		.shopping{
			width: 150px;
		}
		.buy{
			width: 150px;
			background-color: black;
			color: white;
		}
		.num{
			width: 15px;
			height: 15px;
			border-radius: 50%;
			position: absolute;
			background-color: white;
			border: 1px solid black;
			z-index: 10;
			bottom: 25px ;
			left: 50px;
			text-align: center;
			line-height: 15px;
			font-size: 10px;
		}
	}
</style>
